<template>
    <el-form :model="triggerForm" :rules="triggerRules" ref="triggerForm" label-width="180px" size="mini">
        <el-form-item label="自定义事件名称" prop="name">
            <el-input v-model="triggerForm.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="触发表单" prop="type">
            <el-select v-model="triggerForm.type" disabled>
                <el-option v-for="item in triggerOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="state">
            <el-radio-group v-model="triggerForm.state">
                <el-radio :label="0">启用</el-radio>
                <el-radio :label="1">停用</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="触发事件类型" prop="customType">
            <el-select v-model="triggerForm.customType">
                <el-option v-for="item in customTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <div v-show='!triggerForm.customType'>
            <el-form-item label="触发事件动作" prop="customDataType">
                <el-select v-model="triggerForm.customDataType" filterable>
                    <el-option v-for="item in customDataTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="触发事件条件" prop="dataCondition">
                <el-input type="textarea" v-model="triggerForm.dataCondition" placeholder="默认为全部"
                    :autosize="{ minRows: 4}">
                </el-input>
            </el-form-item>
        </div>
        <div v-show='triggerForm.customType'>
            <el-form-item label="触发时间" prop="time">
                <el-date-picker v-model="triggerForm.time" type="datetime" format='yyyy-MM-dd HH:mm' :clearable='false'>
                </el-date-picker>
            </el-form-item>
            <el-form-item label="重复方式" prop="timeType">
                <el-select v-model="triggerForm.timeType">
                    <el-option v-for="item in timeTypeOptions" :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="查询条件" class="MGC4F">
            </el-form-item>
            <div class="itemWrapper__MGC4F">
                <el-form-item>
                    <el-popover placement="bottom" trigger="click" width="402" v-model="popShow">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox v-for="item in checkGroup" :label="item.name" :key="item.idx"
                                style="width:50%">
                                {{item.name}}
                            </el-checkbox>
                            <div style="margin-bottom: 10px;font-size: 12px;color: rgba(0, 0, 0, .85);">自定义字段</div>
                            <el-checkbox v-for="item in customFieldList" :label="item.name" :key="item.idx"
                                style="width:50%">
                                {{item.name}}
                            </el-checkbox>
                        </el-checkbox-group>
                        <div class="operate">
                            <el-button size="mini" @click='popShow = false'>取 消</el-button>
                            <el-button type="primary" size="mini" @click='popClick'>确 定</el-button>
                        </div>
                        <el-button size="mini" type="primary" class="el-icon-circle-plus-outline" plain slot="reference"
                            style="margin-left:30px">
                            添加筛选条件</el-button>
                    </el-popover>
                    <span style="fontSize:12px;color:rgba(0,0,0,.65);margin:0 10px">已添加{{checkList.length}}个</span>
                    <el-button type="text" @click='reset'>重置</el-button>
                </el-form-item>
                <scheme :formDataList='formDataList' ref='customEvent' :width='180' :screenCondition='screenCondition' :classStyle="'dialog'"></scheme>
            </div>
            <el-form-item label="统计数据" class="MGC4F">
            </el-form-item>
            <div class="itemWrapper__MGC4F">
                <el-form-item label="统计数据1" prop="statisticsFir">
                    <el-input v-model="triggerForm.statisticsFir" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="统计数据2" prop="statisticsSec">
                    <el-input v-model="triggerForm.statisticsSec" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="统计数据3" prop="statisticsThi">
                    <el-input v-model="triggerForm.statisticsThi" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="统计数据4" prop="statisticsFou">
                    <el-input v-model="triggerForm.statisticsFou" placeholder="请输入"></el-input>
                </el-form-item>
            </div>
        </div>
    </el-form>
</template>

<script>
    import {
        customFieldOther,
    } from '@/api/customFieldController'
    import customEvent from '@/components/customEvent'
    import scheme from '@/components/scheme'
    export default {
        data() {
            return {
                triggerForm: {
                    name: '',
                    type: 0,
                    state: 0,
                    customType: 0,
                    customDataType: 0,
                    dataCondition: '',
                    time: new Date().dateFormat("yyyy-MM-dd hh:00"),
                    timeType: 0,
                    statisticsFir: '',
                    statisticsSec: '',
                    statisticsThi: '',
                    statisticsFou: ''
                },
                checkList: [],
                popShow: false,
                formDataList: {
                    formGroup: [],
                    searchForm: {
                        code: '',
                        productCode: '',
                        productName: '',
                        productSpecification: '',
                        unit: '',
                        comment: '',
                        planedNumberDown: '',
                        planedNumberUp: '',
                        actualNumberDown: '',
                        actualNumberUp: '',
                        goodProductNumberDown: '',
                        goodProductNumberUp: '',
                        badProductNumberDown: '',
                        badProductNumberUp: '',
                        startTimeStart: '',
                        startTimeEnd: '',
                        endTimeStart: '',
                        endTimeEnd: '',
                        actualStartTimeStart: '',
                        actualStartTimeEnd: '',
                        actualEndTimeStart: '',
                        actualEndTimeEnd: '',
                        state: [],
                    },
                },
                screenCondition:[],
                checkGroup: [{
                        label: 'code',
                        name: '工单编号',
                        placeholder: '请输入工单编号',
                        key: 'srk',
                        idx: 1,
                        i_key:'code'
                    },
                    {
                        label: 'productCode',
                        name: '产品编号',
                        placeholder: '请输入产品编号',
                        key: 'srk',
                        idx: 2,
                        i_key:'productCode'
                    },
                    {
                        label: 'productName',
                        name: '产品名称',
                        placeholder: '请输入产品名称',
                        key: 'srk',
                        idx: 3,
                        i_key:'productName'
                    },
                    {
                        label: 'productSpecification',
                        name: '产品规格',
                        placeholder: '请输入产品规格',
                        key: 'srk',
                        idx: 4,
                        i_key:'productSpecification'
                    },
                    {
                        label: 'unit',
                        name: '产品单位',
                        placeholder: '请选择',
                        key: 'sci',
                        idx: 5,
                        i_key:'unit',
                        dataUrl: {
                            url: '/base/unit_other',
                            value: 'id'
                        }
                    },
                    {
                        label: 'comment',
                        name: '备注',
                        placeholder: '请填写',
                        key: 'srk',
                        idx: 6,
                        i_key:'comment'
                    },
                    {
                        label: ['planedNumberDown', 'planedNumberUp'],
                        name: '计划数',
                        key: 'jsk',
                        idx: 7,
                        dis:'array',
                        i_key:'planedNumber'
                    },
                    {
                        label: ['actualNumberDown', 'actualNumberUp'],
                        name: '实际数',
                        key: 'jsk',
                        idx: 8,
                        dis:'array',
                        i_key:'actualNumber'
                    },
                    {
                        label: ['goodProductNumberDown', 'goodProductNumberUp'],
                        name: '良品数',
                        key: 'jsk',
                        idx: 9,
                        dis:'array',
                        i_key:'goodProductNumber'
                    },
                    {
                        label: ['badProductNumberDown', 'badProductNumberUp'],
                        name: '不良品数',
                        key: 'jsk',
                        idx: 10,
                        dis:'array',
                        i_key:'badProductNumber'
                    },
                    {
                        label: ['startTimeStart', 'startTimeEnd'],
                        name: '计划开始时间',
                        key: 'cki',
                        idx: 11,
                        dis:'array',
                        i_key:'startTime'
                    },
                    {
                        label: ['endTimeStart', 'endTimeEnd'],
                        name: '计划结束时间',
                        key: 'cki',
                        idx: 12,
                        dis:'array',
                        i_key:'endTime'
                    },
                    {
                        label: ['actualStartTimeStart', 'actualStartTimeEnd'],
                        name: '实际开始时间',
                        key: 'dpi',
                        idx: 13,
                        dis:'array',
                        i_key:'actualStartTime'
                    },
                    {
                        label: ['actualEndTimeStart', 'actualEndTimeEnd'],
                        name: '实际结束时间',
                        key: 'dpi',
                        idx: 14,
                        dis:'array',
                        i_key:'actualEndTime'
                    },
                    {
                        label: 'state',
                        name: '状态',
                        placeholder: '请选择',
                        key: 'sel',
                        idx: 15,
                        i_key:'state',
                        node: {
                            default: [0, 1],
                            isRadio: false,
                            options: [{
                                    value: 0,
                                    label: '未开始'
                                },
                                {
                                    value: 1,
                                    label: '执行中'
                                },
                                {
                                    value: 2,
                                    label: '已结束'
                                },
                                {
                                    value: 3,
                                    label: '已取消'
                                },
                            ]
                        }
                    },
                ],
                triggerRules: {
                    name: [{
                        required: true,
                        message: '自定义事件名称不能为空!',
                        trigger: 'blur'
                    }],
                    type: [{
                        required: true,
                    }],
                    state: [{
                        required: true,
                    }],
                    customType: [{
                        required: true,
                    }],
                    customDataType: [{
                        required: true,
                    }],
                    time: [{
                        required: true,
                    }],
                    timeType: [{
                        required: true,
                    }]
                },
                triggerOptions: [{
                    value: 0,
                    label: '工单'
                }],
                customTypeOptions: [{
                    value: 0,
                    label: '数据变更'
                }, {
                    value: 1,
                    label: '定时触发'
                }],
                customDataTypeOptions: [{
                    value: 0,
                    label: '新增数据'
                }, {
                    value: 1,
                    label: '编辑数据'
                }],
                timeTypeOptions: [{
                    value: 0,
                    label: '执行一次'
                }, {
                    value: 1,
                    label: '每天执行'
                }, {
                    value: 2,
                    label: '每周同一天执行'
                }, {
                    value: 3,
                    label: '每月同一天执行'
                }, {
                    value: 4,
                    label: '每年同一天执行'
                }],
                enumSta: {
                    statisticsFir: '${工单.统计数据1}',
                    statisticsSec: '${工单.统计数据2}',
                    statisticsThi: '${工单.统计数据3}',
                    statisticsFou: '${工单.统计数据4}'
                },
                customFieldList: [],
                enumCustomField: {
                    ipt: {
                        placeholder: '请输入',
                        key: 'srk'
                    },
                    inputNumber: {
                        placeholder: '',
                        key: 'jsk'
                    },
                    datePicker: {
                        placeholder: '',
                        key: 'cki'
                    },
                    selectChecked: {
                        placeholder: '请选择',
                        key: 'sel',
                        node: {
                            default: [],
                            isRadio: false,
                            options: []
                        }
                    },
                    relevanceObject: {
                        placeholder: '请选择',
                        key: 'sel',
                        node: {
                            default: [],
                            isRadio: false,
                            options: []
                        }
                    },
                    selectRadio: {
                        placeholder: '请选择',
                        key: 'sel',
                        node: {
                            default: '',
                            isRadio: true,
                            options: []
                        }
                    },
                },
                allCheckGroup:[],
                index:0
            }
        },
        props: {
            instructType:{
                type: String,
                default: 'create'
            }
        },
        components: {
            customEvent,
            scheme
        },
        mounted() {
            this.getCustomFieldOther({
                type: 'workOrder'
            })
        },
        methods: {
            // 自定义字段
            getCustomFieldOther(data) {
                customFieldOther(data).then(res => {
                    //把自定义字段'附件'--'图片'--'关联属性'过滤掉
                    let filterData = res.data.filter(i => {
                        return i.customFieldMess.fieldType != 'upload' &&
                            i.customFieldMess.fieldType != 'picture' &&
                            i.customFieldMess.fieldType != 'relevanceProp'
                    })
                    //将自定义字段得每一项构造成类似checkGroup的每一项结构
                    this.customFieldList = filterData.map((i, index) => {
                        let node = {
                            default: [],
                            isRadio: false,
                            options: []
                        }
                        let checkbox = []
                        if (i.customFieldMess.fieldType == 'selectChecked' || i.customFieldMess.fieldType == 'selectRadio') {
                            checkbox = JSON.parse(i.customFieldMess.checkBox)
                            node.default = i.customFieldMess.fieldType == 'selectChecked' ? [] : ''
                            node.isRadio = i.customFieldMess.fieldType != 'selectChecked' //取反
                            node.options = checkbox.map(k =>{
                                return {
                                    label:k.value,
                                    value:k.value
                                }
                            })
                        } else if(i.customFieldMess.fieldType == 'relevanceObject'){
                            node.default = []
                            node.isRadio = false
                            node.options = i.objectsValue.map(k =>{
                                return{
                                    value:k.code + ' - ' + k.name + ' - ' + (k.specification || ''),
                                    label:k.code + ' - ' + k.name + ' - ' + (k.specification || '')
                                }
                            })
                        }
                        return {
                            label: i.customFieldId,
                            name: i.name,
                            placeholder: this.enumCustomField[i.customFieldMess.fieldType].placeholder,
                            key: this.enumCustomField[i.customFieldMess.fieldType].key,
                            idx: this.checkGroup.length + 1 + index,
                            type:i.customFieldMess.fieldType,
                            i_key:i.customFieldId,
                            node
                        }
                    })
                    this.allCheckGroup = [...this.checkGroup, ...this.customFieldList]
                    
                })
            },
            receiveProp(row) {
                const {name,state,customType,customDataType,dataCondition,statisticsDataMap,time,searchVo} = row
                const {statisticsFir,statisticsSec,statisticsThi,statisticsFou} = this.enumSta
                this.triggerForm.name = name
                this.triggerForm.state = state
                this.triggerForm.customType = customType
                this.triggerForm.dataCondition = dataCondition
                if(customType == 0){ //数据变更
                    this.triggerForm.customDataType = customDataType
                }else if(customType == 1){ //定时触发
                    this.checkList = []
                    this.index = 0
                    this.triggerForm.time = time
                    this.screenCondition = searchVo
                    this.screenCondition.forEach(i => this.checkList = [...this.checkList,i.chineseName])
                    this.triggerForm.statisticsFir = statisticsDataMap[statisticsFir]
                    this.triggerForm.statisticsSec = statisticsDataMap[statisticsSec]
                    this.triggerForm.statisticsThi = statisticsDataMap[statisticsThi]
                    this.triggerForm.statisticsFou = statisticsDataMap[statisticsFou]
                    setTimeout(() => {
                        this.popClick()
                    }, 500);
                }
            },
            inspectForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$emit('getActive', 1)
                    } else {
                        return false;
                    }
                });
            },
            //确定
            popClick() {
                this.index ++ 
                this.arrayList = []
                this.allCheckGroup.forEach(i => { //将选中的对应复选框展示出来
                    if (this.checkList.indexOf(i.name) != -1) this.arrayList = [...this.arrayList, i]
                })
                this.arrayList.sort((a, b) => a.idx - b.idx) //将每一个表单项按顺序排列
                this.formDataList.formGroup = JSON.parse(JSON.stringify(this.arrayList))
                if(this.instructType == 'edit' || this.instructType == 'copy') {
                    /**
                     * index 作用说明 --  index <= 1 说明用户从编辑进入未通过勾选框状态来对表单项进行增加删除
                        * 当从编辑进入且表单项不为空时 用户更改当前已有得表单项值，再更改勾选框其他表单项，对其进行增加删除
                        此时用户更改过后的表单项值会变为初始编辑进入的值
                     */
                    if(this.index <= 1) {
                        this.$nextTick(()=>{this.$refs.customEvent.setUp()})
                    }
                }
                this.popShow = false
            },
            //重置
            reset(){
                this.formDataList.formGroup = []
                this.checkList = [] 
                this.$refs.customEvent.reset()
            },
            //搜集表单项数据
            getFiringRuleInfo() {
                let data = {}
                if (this.triggerForm.customType) { //定时触发
                    let formData = {
                        name: this.triggerForm.name,
                        type: this.triggerForm.type,
                        state: this.triggerForm.state,
                        customType: this.triggerForm.customType,
                        time: this.utils.formatTime(this.triggerForm.time, 'yyyy-MM-dd hh:mm:00'),
                        timeType: this.triggerForm.timeType,
                        statisticsDataMap: {
                            [this.enumSta['statisticsFir']]: this.triggerForm.statisticsFir,
                            [this.enumSta['statisticsSec']]: this.triggerForm.statisticsSec,
                            [this.enumSta['statisticsThi']]: this.triggerForm.statisticsThi,
                            [this.enumSta['statisticsFou']]: this.triggerForm.statisticsFou,
                        }
                    }
                    let customData = {
                        searchVo: this.$refs.customEvent.getData()
                    }
                    data = Object.assign(formData, customData)
                } else { //数据变更
                    let formData = {
                        name: this.triggerForm.name,
                        type: this.triggerForm.type,
                        state: this.triggerForm.state,
                        customType: this.triggerForm.customType,
                        customDataType: this.triggerForm.customDataType,
                        dataCondition: this.triggerForm.dataCondition
                    }
                    data = formData
                }
                return data
            },
            resetForm() {
                this.reset()
                this.$refs.triggerForm.resetFields()
            }
        }
    }
</script>

<style lang="less" scoped>
    .itemWrapper__MGC4F {
        background: #e5e5e5;
        padding: 15px 0 1px 0;
    }

    /deep/ .el-select {
        width: 80%;
    }

    .el-input,.el-textarea{
        width: 80%;
    }

    .el-form-item--mini.el-form-item.MGC4F {
        margin-bottom: 0px;
    }

    .el-form-item--mini.el-form-item:last-child {
        margin-bottom: 20px;
    }

    /deep/ .el-date-editor.el-input {
        width: 80% !important;
    }
</style>